<script setup lang="ts">
import {ref, computed} from 'vue'
import {useRouter} from 'vue-router'
import {ElMessage, ElMessageBox} from 'element-plus'
import {useUserStore} from '@/stores/user'
import {ArrowDown, Setting, SwitchButton, User} from "@element-plus/icons-vue";

const router = useRouter()
const userStore = useUserStore()

// 侧边菜单数据
const menuItems = ref([
  {
    index: '/home/dashboard',
    title: '首页',
    icon: 'House'
  },
  {
    index: '/user',
    title: '用户中心',
    icon: 'User',
    children: [
      {
        index: '/home/profile',
        title: '个人中心',
        icon: 'UserFilled'
      },
      {
        index: '/home/system/users',
        title: '用户管理',
        icon: 'User'
      },
      {
        index: '/home/system/roles',
        title: '角色管理',
        icon: 'Avatar'
      }
    ]
  },
  {
    index: '/system',
    title: '系统管理',
    icon: 'Setting',
    children: [
      {
        index: '/home/settings',
        title: '系统设置',
        icon: 'Tools'
      }
    ]
  }
])

// 用户信息
const userInfo = computed(() => userStore.user)

// 当前激活的菜单
const activeMenu = ref('/home/dashboard')

// 侧边栏折叠状态
const isCollapse = ref(false)

// 处理菜单选择
const handleMenuSelect = (index: string) => {
  activeMenu.value = index
  router.push(index)
}

// 处理退出登录
const handleLogout = async () => {
  try {
    await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    await userStore.logout()
    ElMessage.success('退出成功')
    // router.push('/login')
    // console.log('退出登录成功')
  } catch (error) {
    // 用户取消退出或其他错误
    if (error !== 'cancel') {
      console.error('退出登录失败:', error)
      ElMessage.error('退出失败，请重试')
    }
  }
}

// 处理下拉菜单命令
const handleCommand = (command: string) => {
  switch (command) {
    case 'profile':
      router.push('/home/profile')
      break
    case 'settings':
      router.push('/home/settings')
      break
    case 'logout':
      handleLogout()
      break
  }
}

// 切换侧边栏折叠状态
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

// 检查父级菜单是否有激活的子菜单
const isParentMenuActive = (parentItem: any) => {
  if (!parentItem.children) return false
  return parentItem.children.some((child: any) => child.index === activeMenu.value)
}

// 检查某个子菜单是否与当前激活菜单是同级兄弟菜单
const isSiblingOfActiveMenu = (parentItem: any, childItem: any) => {
  if (!parentItem.children) return false
  
  // 查找当前激活菜单的父级
  const activeChild = parentItem.children.find((child: any) => child.index === activeMenu.value)
  
  // 如果存在激活的子菜单，且当前子菜单不是激活菜单本身，则为同级兄弟菜单
  return activeChild && childItem.index !== activeMenu.value
}
</script>

<template>
  <div class="home-container">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="header-left">
        <el-button
            type="text"
            :icon="isCollapse ? 'Expand' : 'Fold'"
            @click="toggleCollapse"
            class="collapse-btn"
        />
        <span class="system-title">企业数字化平台管理系统</span>
      </div>

      <div class="header-right">
        <el-dropdown @command="handleCommand" trigger="click">
          <div class="user-info">
            <el-avatar
                :size="36"
                :src="userInfo?.avatar || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"
            />
            <span class="username">{{ userInfo?.username || '用户' }}</span>
            <el-icon class="dropdown-icon">
              <ArrowDown/>
            </el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">
                <el-icon>
                  <User/>
                </el-icon>
                个人中心
              </el-dropdown-item>
              <el-dropdown-item command="settings">
                <el-icon>
                  <Setting/>
                </el-icon>
                系统设置
              </el-dropdown-item>
              <el-dropdown-item divided command="logout">
                <el-icon>
                  <SwitchButton/>
                </el-icon>
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>

    <div class="main-container">
      <!-- 侧边菜单栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'" class="sidebar">
        <el-menu
            :default-active="activeMenu"
            :collapse="isCollapse"
            :collapse-transition="false"
            router
            unique-opened
            @select="handleMenuSelect"
        >
          <template v-for="item in menuItems" :key="item.index">
            <!-- 没有子菜单的项 -->
            <el-menu-item v-if="!item.children" :index="item.index">
              <el-icon>
                <component :is="item.icon"/>
              </el-icon>
              <template #title>{{ item.title }}</template>
            </el-menu-item>

            <!-- 有子菜单的项 -->
            <el-sub-menu
                v-else
                :index="item.index"
                :class="{ 'has-active-child': isParentMenuActive(item) }"
            >
              <template #title>
                <el-icon>
                  <component :is="item.icon"/>
                </el-icon>
                <span>{{ item.title }}</span>
              </template>
              <el-menu-item
                  v-for="child in item.children"
                  :key="child.index"
                  :index="child.index"
                  :class="{ 'sibling-of-active': isSiblingOfActiveMenu(item, child) }"
              >
                <el-icon>
                  <component :is="child.icon"/>
                </el-icon>
                <template #title>{{ child.title }}</template>
              </el-menu-item>
            </el-sub-menu>
          </template>
        </el-menu>
      </el-aside>

      <!-- 主内容区域 -->
      <el-main class="main-content">
        <router-view/>
      </el-main>
    </div>
  </div>
</template>

<style scoped lang="scss">
.home-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);

  .header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 64px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    position: relative;
    z-index: 100;

    .header-left {
      display: flex;
      align-items: center;

      .collapse-btn {
        font-size: 18px;
        margin-right: 24px;
        color: #64748b;
        border: none;
        background: transparent;
        padding: 8px;
        border-radius: 8px;
        transition: all 0.3s ease;

        &:hover {
          background: rgba(71, 85, 105, 0.1);
          color: #475569;
        }
      }

      .system-title {
        font-size: 20px;
        font-weight: 600;
        color: #1e293b;
        letter-spacing: -0.025em;
      }
    }

    .header-right {
      .user-info {
        display: flex;
        align-items: center;
        cursor: pointer;
        padding: 8px 16px;
        border-radius: 12px;
        transition: all 0.3s ease;
        border: 1px solid transparent;

        &:hover {
          background: rgba(71, 85, 105, 0.08);
          border-color: rgba(71, 85, 105, 0.12);
        }

        .el-avatar {
          border: 2px solid #e2e8f0;
          transition: border-color 0.3s ease;
        }

        .username {
          margin-left: 12px;
          margin-right: 8px;
          font-size: 14px;
          font-weight: 500;
          color: #475569;
        }

        .dropdown-icon {
          font-size: 14px;
          color: #94a3b8;
          transition: transform 0.3s ease;
        }

        &:hover .dropdown-icon {
          transform: rotate(180deg);
        }
      }
    }
  }

  .main-container {
    flex: 1;
    display: flex;
    overflow: hidden;

    .sidebar {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
      backdrop-filter: blur(15px);
      border-right: 1px solid rgba(226, 232, 240, 0.6);
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      box-shadow: 4px 0 20px -4px rgba(0, 0, 0, 0.05),
      4px 0 6px -1px rgba(0, 0, 0, 0.03),
      inset -1px 0 0 rgba(255, 255, 255, 0.3);
      position: relative;
      z-index: 10;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.02) 0%, rgba(147, 51, 234, 0.01) 100%);
        pointer-events: none;
      }

      .el-menu {
        border-right: none;
        height: 100%;
        background: transparent;
        padding: 12px 0;
        position: relative;
        z-index: 1;

        .el-menu-item,
        .el-sub-menu {
          margin: 2px 12px 6px 12px;
          border-radius: 12px;
          border: none;
          transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          position: relative;
          overflow: hidden;
          font-weight: 500;
          letter-spacing: 0.025em;

          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: left 0.6s;
          }

          &:hover {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(99, 102, 241, 0.08) 100%);
            color: #2563eb;
            transform: translateX(4px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15),
            0 2px 4px rgba(59, 130, 246, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(59, 130, 246, 0.2);

            &::before {
              left: 100%;
            }

            .el-icon {
              color: #2563eb;
              transform: scale(1.1);
            }
          }

          &.is-active {
            background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
            color: white;
            transform: translateX(6px);
            box-shadow: 0 8px 25px rgba(59, 130, 246, 0.35),
            0 4px 12px rgba(59, 130, 246, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.2),
            inset 0 -1px 0 rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            font-weight: 600;

            &::after {
              content: '';
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
              width: 3px;
              height: 20px;
              background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 100%);
              border-radius: 2px 0 0 2px;
            }

            .el-icon {
              color: white;
              filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
            }
          }

          .el-icon {
            font-size: 18px;
            margin-right: 14px;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
          }
        }

        .el-sub-menu {
          .el-sub-menu__title {
            border-radius: 12px;
            margin: 2px 12px 6px 12px;
            padding-left: 20px !important;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            font-weight: 500;
            letter-spacing: 0.025em;
            position: relative;
            overflow: hidden;

            &::before {
              content: '';
              position: absolute;
              top: 0;
              left: -100%;
              width: 100%;
              height: 100%;
              background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
              transition: left 0.6s;
            }

            &:hover {
              background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(99, 102, 241, 0.08) 100%);
              color: #2563eb;
              transform: translateX(4px);
              box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15),
              0 2px 4px rgba(59, 130, 246, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
              border: 1px solid rgba(59, 130, 246, 0.2);

              &::before {
                left: 100%;
              }

              .el-icon {
                color: #2563eb;
                transform: scale(1.1);
              }
            }

            .el-icon {
              font-size: 18px;
              transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
              filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
            }
          }

          /* 当父级菜单有激活子菜单时的样式 */
          &.has-active-child {
            .el-sub-menu__title {
              background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
              color: white !important;
              transform: translateX(6px);
              box-shadow: 0 8px 25px rgba(59, 130, 246, 0.35),
              0 4px 12px rgba(59, 130, 246, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.2),
              inset 0 -1px 0 rgba(0, 0, 0, 0.1);
              border: 1px solid rgba(255, 255, 255, 0.2);
              font-weight: 600;

              &::after {
                content: '';
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 3px;
                height: 20px;
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 100%);
                border-radius: 2px 0 0 2px;
              }

              .el-icon {
                color: white !important;
                filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
              }

              span {
                color: white !important;
              }

              &:hover {
                background: linear-gradient(135deg, #2563eb 0%, #4f46e5 50%, #7c3aed 100%);
                color: white !important;

                .el-icon {
                  color: white !important;
                }

                span {
                  color: white !important;
                }
              }
            }
          }

          .el-menu {
            background: rgba(248, 250, 252, 0.5);
            border-radius: 0 0 12px 12px;
            margin: 0 12px 8px 12px;
            padding: 8px 0;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);

            .el-menu-item {
              margin: 2px 8px;
              padding-left: 44px !important;
              font-size: 13px;
              border-radius: 8px;
              transition: all 0.3s ease;

              &:hover {
                background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(99, 102, 241, 0.06) 100%);
                transform: translateX(2px);
                box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
              }

              &.is-active {
                background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
                color: white;
                transform: translateX(4px);
                box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
                font-weight: 600;

                .el-icon {
                  color: white;
                }
              }

              /* 当为激活菜单的同级兄弟菜单时，图标颜色设置为Element Plus默认菜单文字颜色 */
              &.sibling-of-active {
                .el-icon {
                  color: var(--el-menu-text-color) !important;
                  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
                }
              }

              .el-icon {
                font-size: 16px;
                margin-right: 12px;
              }
            }
          }
        }

        .el-menu-item-group__title {
          padding: 0;
        }

        /* 折叠状态下的特殊样式 */
        &.el-menu--collapse {
          .el-menu-item {
            margin: 4px 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 !important;
            height: 48px;
            width: calc(100% - 16px);

            .el-icon {
              margin-right: 0;
              font-size: 22px; /* 设置为22px尺寸 */
              display: flex;
              justify-content: center;
              align-items: center;
              width: 18px;
              height: 18px;
              transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            }

            &:hover {
              /* 保持悬停效果但不改变图标大小 */
              .el-icon {
                /* 图标大小保持不变，只改变颜色 */
              }
            }

            &.is-active {
              /* 激活状态保持原始大小 */
              .el-icon {
                /* 图标大小保持不变，只改变颜色 */
              }
            }
          }

          .el-sub-menu {
            margin: 4px 8px;

            .el-sub-menu__title {
              margin: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 0 !important;
              height: 48px;
              width: 100%;

              .el-icon {
                margin-right: 0;
                font-size: 22px; /* 设置为22px尺寸 */
                display: flex;
                justify-content: center;
                align-items: center;
                width: 18px;
                height: 18px;
                transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
              }

              span {
                display: none;
              }

              .el-sub-menu__icon-arrow {
                display: none;
              }
            }

            &:hover {
              /* 保持悬停效果但不改变图标大小 */
              .el-sub-menu__title .el-icon {
                /* 图标大小保持不变，只改变颜色 */
              }
            }

            &.has-active-child {
              /* 激活子菜单的父级菜单保持原始大小 */
              .el-sub-menu__title {
                .el-icon {
                  /* 图标大小保持不变，只改变颜色 */
                }

                &::after {
                  display: none; /* 隐藏折叠状态下的指示条 */
                }
              }
            }
          }
        }
      }
    }

    .main-content {
      flex: 1;
      padding: 24px;
      overflow-y: auto;
      background: transparent;

      /* 自定义滚动条 */
      &::-webkit-scrollbar {
        width: 6px;
      }

      &::-webkit-scrollbar-track {
        background: rgba(148, 163, 184, 0.1);
        border-radius: 3px;
      }

      &::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.3);
        border-radius: 3px;
        transition: background 0.3s ease;

        &:hover {
          background: rgba(148, 163, 184, 0.5);
        }
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .home-container {
    .header {
      padding: 0 16px;
      height: 56px;

      .header-left {
        .collapse-btn {
          margin-right: 16px;
        }

        .system-title {
          font-size: 18px;
        }
      }

      .header-right {
        .user-info {
          padding: 6px 12px;

          .username {
            display: none;
          }
        }
      }
    }

    .main-container {
      .main-content {
        padding: 16px;
      }
    }
  }
}
</style>
